<template>
	<view class="containerring" id="circle" :style="{'background': color,'width':handleSize,'height':handleSize}">
		　　<view class="leftring">
			<view class="left animate"
				:style="{'background': ringtrackcolor,'border-radius':handRadius('l'), 'transform':`${renderLeft()}`}">
			</view>
		</view>
		<view class="rightring">
			<view class="right animate"
				:style="{'background': ringtrackcolor,'border-radius':handRadius('r'),'transform':`${renderRight()}`}">
			</view>
		</view>
		
		<view class="proportion flex" :style="{'width': mw,'height': mw}">
			<slot>
				<text class="nameinner" :style="{ color: textColor }">{{ text }}</text>
			</slot>
			<text class="numinner" v-if="!text" :style="{ color: textColor }">{{rotate}}%</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "lj-chart",
		props: {
			color: { //环状图颜色
				type: String,
				default: '#0f3bff'
			},
			diameter: { //进度条宽度
				type: Number,
				default: 8
			},
			ringtrackcolor: { //环状图轨道颜色
				type: String,
				default: '#e9ecef'
			},
			rotate: {
				type: String | Number,
				default: 0
			},
			size: { //容器大小
				type: Number,
				default: 60
			},
			textColor: {
				type: String,
				default: '#989898'
			},
			text: {
				type: String,
				default: ''
			},
		},

		data() {
			return {
				getBoxW: null
			};
		},
		computed: {
			mw() {
				const makeW = `${this.getBoxW?.width - this.diameter}px`
				return makeW
			},
			handleSize() {
				const hSize = `${this.size}px`
				return hSize
			},

		},
		methods: {
			async init() {
				this.getBoxW = await this.getBox()
			},
			async getBox() {
				let obj = null
				return new Promise(resolve => {
					const query = uni.createSelectorQuery().in(this);
					query.select(`#circle`).boundingClientRect(data => {
						obj = data
					}).exec(() => {
						resolve(obj);
					});
				})
			},
			handRadius(type) {
				let htm = ``
				const bSize = `${this.size/2}px`
				if (type == 'l') {
					htm = `${bSize} 0 0 ${bSize}`
				} else {
					htm = `0 ${bSize} ${bSize} 0`
				}
				return htm
			},
			renderLeft() {
				let rotateNum = this.rotate * 3.6;
				if (rotateNum <= 180) {
					return `rotate(${0}deg)`
				}
				return `rotate(${(rotateNum-180)}deg)`
			},
			renderRight() {
				let rotateNum = this.rotate * 3.6;
				if (rotateNum <= 180) {
					return `rotate(${rotateNum}deg)`
				} 
				return `rotate(${180}deg)`
			},
		},
		mounted() {
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
	.containerring {
		width: 90rpx;
		height: 90rpx;
		position: relative;
		border-radius: 50%;

		.leftring {
			width: 50.6%;
			height: 100%;
			margin: 0px;
			position: absolute;
			left: -0.4%;
			top: 0;
			overflow: hidden;
		}

		.rightring {
			width: 50.6%;
			height: 100%;
			margin: 0;
			position: absolute;
			right: -0.4%;
			top: 0;
			overflow: hidden;
		}

		.left, .right {
			width: 100%;
			height: 100%;
			transform-origin: right center;
			transition: transform 0.3s linear;
		}

		.left {
			border-radius: 55px 0 0 55px;
		}

		.right {
			border-radius: 0 55px 55px 0;
			transform-origin: left center;
		}

		.proportion {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: #fff;
			border-radius: 50%;
			font-size: 18rpx;
			box-sizing: border-box;
			text-align: center;
			flex-direction: column;
			justify-content: center;
		}
	}
	
	.numinner {
		font-family: "PINGFANG";
		font-size: 18rpx;
		font-weight: 400;
		margin-top: 4rpx;
	}
</style>